{% extends 'customer_dashboard.html' %}

{% block content %}
<div class="card">
  <h2><i class="bi bi-exclamation-circle"></i> 银行卡挂失 / 取消挂失</h2>
  <p style="margin-top: 10px;">请选择您要挂失或取消挂失的银行卡：</p >

  {% if message %}
    <p style="color: {{ 'green' if success else 'red' }}; margin: 15px 0;">{{ message }}</p >
  {% endif %}

  {% if cards %}
  <div class="card-container">
    {% for card in cards %}
    <div class="card-item" style="border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 15px; background-color: #fdfdfd;">
      <h4 style="margin-bottom: 10px;"><i class="bi bi-credit-card-2-front"></i> 卡号：{{ card.cardID }}</h4>
      <p><i class="bi bi-tags"></i> <strong>卡类型：</strong>{{ card.cardType or '未指定' }}</p >
      <p>
        <i class="bi bi-shield-check"></i> <strong>当前状态：</strong>
        {% if card.IsReportLoss == '是' %}
          <span style="color: red;">已挂失</span>
        {% else %}
          <span style="color: green;">正常</span>
        {% endif %}
      </p >

      <form method="POST" style="margin-top: 10px;">
        <input type="hidden" name="cardID" value="{{ card.cardID }}">
        {% if card.IsReportLoss == '是' %}
          <button type="submit" name="action" value="unreport" class="btn btn-sm btn-warning">取消挂失</button>
        {% else %}
          <button type="submit" name="action" value="report" class="btn btn-sm btn-danger">确认挂失</button>
        {% endif %}
      </form>
    </div>
    {% endfor %}
  </div>
  {% else %}
    <p style="color: gray;">您没有可管理的银行卡。</p >
  {% endif %}

  <div style="margin-top: 20px;">
    返回主页
  </div>
</div>
{% endblock %}